cascading style sheets reference

רקע

רקע - תכונות רקע משפיעות על צורת המראה של רקע אלמנט מסוים. שלא כמו עם HTML תקני, כל אלמנט יכול לקבל דמות או צבע רקע. דמויות רקע יכולות לחזור על עצמן בצורה אנכית, אופקית, שתיהן (אפקט הריצוף המסורתי של דמויות רקע בגוף של דפי HTML) או אף אחת מהן (מאפשר אפקטים קלים של "watermark"). הדרך שבה הרקע משתנה כאשר אתם מגלגלים את הדף גם היא נקבעת בעזרת CSS. דמות רקע יכולה להתגלגל כאשר הדף מתגלגל (מראה HTML מסורתי) או להישאר קבועה בזמן שהטקסט מתגלגל.

תכונות הרקע הן:

• צבע-רקע background-color
• דמות-רקע background-image
• חיבור-רקע background-attachment
• חזרת-רקע background-repeat
• מיקום-רקע background-position

צבע-רקע

מה הוא עושה?

באופן מפתיע, צבע-הרקע מגדיר את צבע הרקע של האלמנט. כל אלמנט יכול לקבל צבע רקע בעזרת CSS.

ערכים אפשריים

צבע-רקע מוגדר כערך צבע או כשקוף.

עבור יותר פרטים בנוגע לערכיי צבע עיינו בחלק שלנו אודות ערכים

צבע רקע שקוף (transparent) מבטיח שכל מה שנמצא מאחורי האלמנט הוא נראה לעין ואינו מוסתר ע"י רקע האלמנט.

ערכים של ברירת מחדל

אם לא הוגדר כל צבע-רקע, אזי לאלמנט יהיה רקע שקוף.

האם זה עובר בירושה?

צבע-רקע אינו עובר בירושה לאלמנט מן ההורה שלו. ואולם, אם לא מגדירים צבע-רקע, או לא קובעים אותו לשקוף, זה מבטיח כי צבע אלמנט ההורה יבריק.

דמות-רקע

מה הוא עושה?

בעזרת עמודי אתר המבוססים על HTML מסורתי רק עמוד שלם יכול לקבל דמות-רקע. מספר דפדפנים מאפשרים למספר אלמנטים, כמו למשל תאי טבלה (table cells), לקבל דמויות רקע, אך אין זה סטנדרטי.

CSS מאפשר לכל אלמנט שהוא לקבל דמות רקע. כפי שנראה בקרוב, ניתן להשתמש בדמות הרקע ביותר דרכים מאשר ברקעים המרוצפים בפשטות של דפי אתר מסורתיים.

ערכים אפשריים

דמויות רקע מוגדרות או ע"י ה-URL של הדמות שבה משתמשים עבור הרקע, או ע"י מילת המפתח none.

עבור יותר פרטים בנוגע ל-URL-ים עיינו בחלק הדן בערכים.

ערכים של ברירת מחדל

אם לא מוגדרת כל דמות-רקע, תהיה לאלמנט דמות רקע של none.

האם זה עובר בירושה?

דמות-רקע אינה עוברת בירושה מאלמנט ההורה.

רמזים והצעות

ה-URL עבור דמות-רקע הינו ביחס לדף הסגנון ולא למסמך ה-HTML. זה אמור להיות ברור כאשר חושבים על זה, אך מספר גרסאות של Navigator אינן עובדות בצורה תקינה ומתייחסות ל-URL ביחס למסמך ה-HTML. זה בסדר כל עוד דף הסגנון משובץ פנימה, אך בעשותם כך זה מחמיץ כמה מטרות מרכזיות של דפי הסגנון.

כך שתעשו את הדבר הנכון ותקשרו את דף הסגנון שלכם למסמך ה-HTML, אך לאחר מכן ודאו כי הכנסתם את שניהם לאותה הספרייה. בדרך זו ה-URL-ים היחסיים עבור דמות הרקע יהיו זהים גם עבור דף הסגנון וגם עבור מסמך ה-HTML, וכך תזכו להשיג את האפקט הרצוי גם ב-Navigator וגם ב-Explorer.

פתרון זה הוא טוב עבור אתר קטן, שבו אתם יכולים לשים את כל המסמכים בספרייה אחת. אך כשכבר לא תוכלו לעשות זאת (לדעתי זה יקרה כאשר יהיו לכם יותר מכ3- עמודים באתר) עליכם להתחיל להשתמש ב-URL מוחלט, במצב כזה.

מומלץ גם כי תגדירו צבע-רקע כאשר מגדירים דמות-רקע. הדבר מבטיח כי אם הדמות אינה זמינה (או דמויות שמבוטלות ע"י המשתמש), צבע הטקסט הבולט אינו מתערב עם הרקע, כך שהטקסט נשאר קריא.

חיבור-רקע

מה הוא עושה?

בעזרת דמויות רקע מסורתיות בגוף מסמך ה-HTML, כאשר הדף מגולגל הדמות מתגלגלת גם היא. בעזרת דמויות רקע ו-CSS אתם יכולים להגדיר כי אסור לדמות רקע להתגלגל, אלא עליה להישאר קבועה כאשר הדף מתגלגל.

ערכים אפשריים

חיבור-רקע יכול לקבל אחד מתוך שני ערכים: גלגול (scroll) וקבוע (fixed).

גלגול (scroll) - מגדיר כי על הרקע להתגלגל בהתאם לגלגול הדף (זוהי ההתנהגות הנוכחית של דפדפנים כאשר דף בעל דמות רקע מתגלגל).

קבוע (fixed) - מגדיר כי אסור לדמות הרקע לזוז כאשר הדף מתגלגל.

טקסט, דמויות וכל תוכן אחר הקרוב בצורה אפקטיבית, יתגלגל על רקע נייח.

ערכים של ברירת מחדל

אם לא מוגדר כל ערך שהוא לחיבור-הרקע, ערך ברירת המחדל הוא גלגלו, אשר משעתק את התנהגותם של דפדפנים מרכזיים.

האם זה עובר בירושה?

חיבור-רקע אינו עובר בירושה.

רמזים והצעות

חזרת-רקע

מה הוא עושה?

בעזרת דמות הרקע המסורתית, הקשורה לגוף הדף, היכן שדמות הרקע קטנה יותר מרוחב או גובה הדף, הדפדפנים "מרצפים" (tile) את הדמות (כלומר חזרת הדמות בצורה אנכית ואופקית).

CSS מאפשר לכם להגדיר האם וכיצד הדפדפן מטפל בדמויות הרקע כאשר רוחב וגובה הדמות הם נמוכים מאלה של האלמנט.

ערכים אפשריים

חזרת-רקע יכולה לקבל את הערכים הבאים:

• repeat
• repeat-x
• repeat-y
• no-repeat

repeat - הוא בעל השפעה על ריצוף דמות הרקע אופקית ואנכית, כמו דמות הרקע המסורתית בעמודי אתר.

repeat-x - מרצפת דמות מסוימת אופקית, אך לא אנכית.

repeat-y - מרצפת את הדמות אנכית, אך לא אופקית.

no-repeat - מבטיח כי הדמות מופיעה פעם אחת ואינה מרוצפת לא אופקית ולא אנכית.

ערכים של ברירת מחדל

אם לא נקבע כל ערך לחזרת-רקע, ערך ברירת המחדל של תכונה זו הוא repeat. הדבר משעתק את האפקט של דמות הרקע המסורתית.

האם זה עובר בירושה?

חזרת-רקע אינה עוברת בירושה מאלמנט ההורה.

רמזים והצעות

ניתן לאלמנטים שאינם הגוף דמות רקע, וכך הם יכולים לקבל גם חזרת-רקע.

מיקום-רקע

מה הוא עושה?

בעזרת דמות רקע המבוססת על HTML מסורתי, הדמות ממוקמת בפינה השמאלית העליונה של העמוד והיא מרצפת משם.

בעזרת CSS אנו יכולים להגדיר היכן למקם דמות רקע.

אם הדמות חוזרת (אנכית, אופקית, או שניהם) אזי היא חוזרת ממיקום זה. אם קיימת דמות יחידה, היא ממוקמת בעזרת תכונת מיקום-הרקע.

ערכים אפשריים

מיקום הרקע הוא אחת התכונות המסובכות ביותר. קיימות מספר דרכים להגדיר מיקום של דמות. ניתן להגדיר מיקומים בעזרת:

• זוגות של ערכים אחוזיים, ערכיי אורך או מילות מפתח.
• מילות מפתח אינדיבידואליות.

זוגות של ערכים אחוזיים

כאשר מוגדר מיקום בעזרת זוג ערכים אחוזיים
לדוגמא:

background-position: 0% 0%

הערך הראשון קשור למיקום החלק העליון של הדמות, בעוד שהערך השני קשור למיקום הצד השמאלי של הדמות. הדרך הטובה ביותר להסביר את המכאניזם המעשי היא דרך דוגמאות.

נניח שיש לנו את התכונה הבאה:

(background-position: 15% 25%)

. פירושו של דבר דבר שהנקודה 15% מהחלק העליון של הדמות מיושרת עם הנקודה 15% מהחלק העליון של האלמנט. הנקודה 25% משמאל לדמות מיושרת עם נקודה 25% משמאל לאלמנט.

זה מסובך מעט. קיימות דרכים פשוטות יותר להגדרת המיקום.

זוגות של ערכיי אורך

כאשר מוגדר מיקום בעזרת זוג ערכיי אורך
לדוגמא:

background-position 20px 20px

הערך הראשון מגדיר את מיקום החלק העליון של הדמות ביחס לאלמנט, כאשר הערך השני מגדיר את מיקום החלק השמאלי של הדמות ביחס לאלמנט.

הדרך שבה זה פועל היא מעט פשוטה יותר מן האחוזים. שוב, הבה נבחן דוגמא.

בעזרת התכונה הבאה

(background-position 20px 30px)

החלק העליון של הדמות ממוקם 20px מהחלק העליון של האלמנט, שעבורו היא משמשת רקע, כאשר החלק השמאלי של הדמות ממוקם 30px מהחלק השמאלי של האלמנט, שעבורו היא מהווה רקע.

אם תהיתם במה זה שונה מערכיי אחוז, בדקו את הטקסט המודגש בחלק הזה, והשוו זאת עם טקסט מודגש בחלק העליון, המתאר כיצד פועלים ערכיי אחוז.

בחלק שלנו אודות ערכים אנו מכסים בדיוק אלו אורכים מפורטים.

זוגות של מילות מפתח ומילות מפתח אינדיבידואליות

במקום להסתמך על ערכיי אורך, או על ערכים אחוזיים, ניתן להשתמש בערכים של מילות מפתח. למילות מפתח יש אפקט זהה כמו לאחוזים.

מילות המפתח שבהן ניתן להשתמש כדי להגדיר מיקום, הן:

• top (עליון)
• left (שמאל)
• center (מרכז)
• right (ימין)
• bottom (תחתון)

במקום להיכנס לפירוט מפרך, אני אביא את ההסבר מתוך ההמלצה:

• "top left" ו-"left top" שניהם מתכוונים לאותו הדבר כמו '0% 0%'.
• "top", "top center" ו-"center top" מתכוונים לאותו הדבר כמו '50% 0%'.
• "right top" ו-"top right" מתכוונים לאותו הדבר כמו '100% 0%'.
• "left", "left center" ו-"center left" מתכוונים לאותו הדבר כמו '0% 50%'.
• "center" ו-"center center" מתכוונים לאותו הדבר כמו '50% 50%'.
• "right", "right center" ו-"center right" מתכוונים לאותו הדבר כמו '100% 50%'.
• "bottom left" ו-"left bottom" מתכוונים לאותו הדבר כמו '0% 100%'.
• "bottom", "bottom center" ו-"center bottom" מתכוונים לאותו הדבר כמו '50% 100%'.
• · "bottom right" ו-"right bottom" מתכוונים לאותו הדבר כמו '100% 100%'.

ערכים של ברירת מחדל

אם לא מוגדר כל מיקום-רקע, זה מקביל למיקום-רקע של 0% 0%, כלומר, החלק השמאלי העליון של דמות הרקע ממוקמת בחלק השמאלי העליון של האלמנט.

האם זה עובר בירושה?

אלמנט כלשהו אינו יורש את מיקום-הרקע של אלמנט ההורה שלו.

רמזים והצעות

תכונת מיקום-הרקע מאפשרת לכם ליצור אפקטים של watermark (סימן מים) ע"י מיקום של דמות בודדת במרכז האלמנט. לדוגמא, במרכז העמוד. זוהי תכונה מסובכת אך רבת עוצמה.

לא כל סוג של אלמנט יכול לקבל מיקום-רקע, למרות שכל סוג אלמנט יכול לקבל דמות-רקע. רק אלמנטים גושיים ואלמנטים מוחלפים יכולים לקבל תכונה זו. עבור יותר מידע אודות הסוגים השונים של אלמנט, בדקו את החלק המתקדם של דף הסגנון.

רקע

רקע הוא תכונה בניסוח מקוצר, המאפשרת לכם לקבוע כל תכונה או את כל תכונות הרקע בבת אחת.

תכונת הרקע מקבלת בדיוק את אותם סוגי הערכים כמו התכונות המתוארות בחלק זה. על מנת להגדיר יותר מתכונה אחת בעזרת קיצור הרקע, ערכיי הרקע השונים מופרדים, פשוט ע"י מרווחים.

כדוגמא פשוטה, זוהי תכונת רקע:

background:url(http://www.westciv.com.au/gifs/bg1.gif) fixed no-repeat top center)

הוא המקבילה ל:

background-image:url(http://www.westciv.com.au/gifs/bg1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;